/*
 * @Author: lyx 2858535420@qq.com
 * @Date: 2023-04-28 10:55:09
 * @LastEditors: lyx 2858535420@qq.com
 * @LastEditTime: 2023-04-28 16:07:34
 * @FilePath: /antd-vue2-template/src/config/theme.config.js
 * @Description: 主题设置
 */

// 默认主题配置信息
export const defaultTheme = {
  // 全局主色 
  '@primary-color': '#0052D9',
  // 成功色
  '@success-color': '#00B429',
  // 警告色
  '@warning-color': '#F4AB31',
  // 错误色
  '@error-color': '#F53F3E',
  // 黑色文字标题 0.9 #000000e6
  '@heading-color': 'fade(@general-black-color, 90%)',
  // 正文 0.6 #00000099
  '@text-color': 'fade(@general-black-color, 60%)',
  // 黑色文字标题 0.4 #00000066
  '@text-color-secondary': 'fade(@general-black-color, 40%)',
  // 字体相反颜色
  '@text-color-inverse': '@general-white-color',
  // 通用背景颜色
  '@general-bg-color': '#f3f3f3',
  // 背景失效颜色
  '@general-bg-invalid-color': '#eeeeee',
  // 通用分割线
  '@general-divider-color': '#e7e7e7',
  // 通用边框颜色
  '@general-border-color': '#dcdcdc',
  // antd 组件兼容主题色内容
  // ant 组件的背景色
  '@component-background': '@general-white-color',
  // 通用亮色背景颜色
  '@background-color-light': 'hsv(0, 0, 98%)',
  // Default grey background color
  '@background-color-base': 'hsv(0, 0, 96%)',
  // item 移上去
  '@item-hover-bg': '#e6f7ff',
  // item 激活
  '@item-active-bg': '#e6f7ff',
  // icon hover 颜色
  '@icon-color-hover': 'fade(@general-black-color, 75%)',
  // 禁用的颜色
  '@disabled-color': 'fade(@general-black-color, 25%)',
  // 禁用背景色
  '@disabled-bg': '@background-color-base',

  // Layout 整个布局背景颜色
  '@layout-body-background': '@general-bg-invalid-color',

  // layout header 背景
  '@layout-header-background': '@component-background',
  // layout header 字体颜色
  '@layout-header-font-color': '@text-color',
  // layout 布局边框颜色
  '@layout-header-border-color': '@general-border-color',

  // 菜单背景
  '@menu-bg': '@component-background',
  // 菜单颜色
  '@menu-item-color': '@text-color',

  // 多页签背景颜色
  '@multi-tabs-bg-color': '@general-white-color',
  // 多页签 active/hover 背景颜色
  '@multi-tabs-active-bg-color': '@general-bg-invalid-color',
  // 多页签字体颜色
  '@multi-tabs-color': '@text-color-secondary',
  // 多页签 active/hover 字体颜色
  '@multi-tabs-active-color': '@heading-color',
  // 多页签分割颜色
  '@multi-tabs-divider-color': '@general-divider-color',
  // 多页签箭头颜色
  '@multi-tabs-arrow-color': '@general-black-color',

  // base border outline a component
  '@border-color-base': 'hsv(0, 0, 85%)',
  // split border inside a component
  '@border-color-split': 'hsv(0, 0, 91%)',

  // info 提示背景色
  '@alert-info-bg-color': '#e6f7ff',
  '@alert-info-border-color': '#91d5ff',
  // btn primary 颜色
  '@btn-primary-color': '@general-white-color',
  // table 表头背景
  '@table-header-bg': '@background-color-light',
  // table hover 背景
  '@table-row-hover-bg': '@item-hover-bg',
  // table 行选择
  '@table-selected-row-bg': '@background-color-light',
  // table 展开行背景
  '@table-expanded-row-bg': '#fbfbfb',
  // 树节点被选中
  '@tree-node-selected-bg': '#a3d3ff',

  // Descriptions
  '@descriptions-bg': '@background-color-light',

  // collapse
  '@collapse-header-bg': '@background-color-light'
};

// 暗黑主题
export const darkTheme = {
  ...defaultTheme,

  // 通用背景颜色
  '@general-bg-color': '@general-dark-bg-color',
  // 背景失效颜色
  '@general-bg-invalid-color': '@general-dark-bg-invalid-color',
  // 通用分割线
  '@general-divider-color': '@general-dark-divider-color',
  // 通用边框颜色
  '@general-border-color': '@general-dark-border-color',
  // 黑色文字标题 0.9 #000000e6
  '@heading-color': '@text-color-dark',
  // 正文 0.6 #00000099
  '@text-color': '@text-color-secondary-dark',
  // 黑色文字标题 0.4 #00000066
  '@text-color-secondary': '@text-color-placeholder-dark',
  // ant 组件的背景色
  '@component-background': '@general-bg-invalid-color',
  // 通用亮色背景颜色
  '@background-color-light': '@general-white-active-color',
  // Default grey background color
  '@background-color-base': 'fade(@general-white-color, 20%)',
  // 项hover
  '@item-hover-bg': '@general-white-hover-color',
  // item 激活
  '@item-active-bg': '@general-white-hover-color',
  // icon hover 颜色
  '@icon-color-hover': 'fade(@general-white-color, 80%)',
  // 禁用的颜色
  '@disabled-color': '@disabled-color-dark',

  // base border outline a component
  '@border-color-base': '@general-dark-divider-color',
  // split border inside a component
  '@border-color-split': '@general-dark-border-color',

  // Layout 整个布局背景颜色
  '@layout-body-background': '@general-bg-color',
  // layout header 字体颜色
  '@layout-header-font-color': '@heading-color',

  // 菜单颜色
  '@menu-item-color': '@text-color-secondary-dark',

  // 多页签背景颜色
  '@multi-tabs-bg-color': '@general-dark-bg-invalid-color',
  // 多页签 active/hover 背景颜色
  '@multi-tabs-active-bg-color': '@general-dark-divider-color',
  // 多页签字体颜色
  '@multi-tabs-color': '@text-color-secondary',
  // 多页签 active/hover 字体颜色
  '@multi-tabs-active-color': '@text-color-dark',
  // 多页签分割颜色
  '@multi-tabs-divider-color': '@general-divider-color',
  // 多页签箭头颜色
  '@multi-tabs-arrow-color': '@general-white-color',

  // info 提示背景色
  '@alert-info-bg-color': '@general-white-active-color',
  '@alert-info-border-color': '@general-border-color',
  // table 表头背景
  '@table-header-bg': '#383838',
  // table 展开行背景
  '@table-expanded-row-bg': '@general-white-active-color',
  // 树节点被选中
  '@tree-node-selected-bg': '@general-white-active-color',
  // Descriptions
  '@descriptions-bg': 'fade(@general-white-color, 10%)',
  // collapse
  '@collapse-header-bg': '@general-bg-invalid-color'
};

// 输出主题信息
export const themeConfigs = {
  light: defaultTheme,
  dark: darkTheme
};
